<template>
  <uni-card class="mycard">
    <u-form labelWidth="120" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
      <u-form-item label="商业贷款" prop="com_amount">
        <u-input prefixIcon="rmb" prefixIconStyle="font-size: 22px;color: #ff0000" v-model="model1.com_amount" border="bottom">
          <u-text text="万元" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
        </u-input>
      </u-form-item>
      <u-form-item label="贷款期限" prop="year" @click="showyear = true;">
        <u-input v-model="model1.year" disabled border="bottom" placeholder="请选择贷款期限"></u-input>
        <u-icon slot="right" name="arrow-right">万元</u-icon>
      </u-form-item>
      <u-form-item label="购房性质">
        <u-radio-group v-model="shape" @change="groupChange" placement="row">
          <u-radio :customStyle="{marginBottom: '8px'}" label="一套房" :name="1" ></u-radio>
          <u-radio :customStyle="{marginBottom: '8px'}" label="二套房" :name="2" ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="商业贷款年利率" prop="rate">
        <!-- <u-input v-model="model1.rate" disabled border="bottom" placeholder="请选择性别"></u-input> -->
        <uni-data-select v-model="model1.rate" placeholder="请选利率" :localdata="range" @change="selectchange">
        </uni-data-select>
        <u-text :text="com_rate_percent+'%'" margin="0 3px 0 0" type="tips"></u-text>
      </u-form-item>
      <u-form-item label="还款方式" prop="pay_method">
        <u-radio-group v-model="model1.pay_method" placement="row">
          <u-radio :customStyle="{marginBottom: '8px'}" label="等额本息 " name="same_all" ></u-radio>
          <u-radio :customStyle="{marginBottom: '8px'}" label="等额本金 " name="same_base" ></u-radio>
        </u-radio-group>
      </u-form-item>
    </u-form>
    <u-action-sheet :show="showyear" :actions="actionsyear" title="请选择年限" @close="showSex = false" @select="yearSelect">
    </u-action-sheet>
    <u-button @click="submit" type="primary" text="提交"></u-button>
    <u-button @click="reset" type="error" text="重置"></u-button>
  </uni-card>
</template>

<script>
export default {
  methods: {
    reset(){
      this.com_rate_percent=5.9,
      this.fund_rate_percent=3.5,
      this.shape = 1
      this.model1= {
        com_amount: '',
        fund_amount: '',
        year: 6,
        rate: 1,
        pay_method: 'same_all'
      }
      this.$emit("rest")
    },
    submit() {
      uni.request({
        url: `http://fangd.sinaapp.com/home/calc?com_amount=${this.model1.com_amount}&fund_amount=${this.model1.fund_amount}&year=${this.model1.year}&com_rate_percent=${this.com_rate_percent}&fund_rate_percent=${this.fund_rate_percent}&pay_method=${this.model1.pay_method}`,
        success: (res) => {
          this.$emit("show",res.data)
          // console.log(res.data)
        }
      })
    },
    yearSelect(item) {
      if (item.name <= 5) {
        this.com_rate_percent = 5.75
      } else {
        this.com_rate_percent = 5.9
      }
      this.model1.year = item.name
      this.showyear = false
      // console.log(item)
    },
    selectchange(vale) {
      // console.log(vale)
      let num = this.com_rate_percent * vale
      this.com_rate_percent = num.toFixed(3)
    },
    groupChange(vale) {
      if (vale == 1) {
        this.com_rate_percent = 5.9
      } else {
        this.com_rate_percent = 6.325
      }
    }
  },
  data() {
    return {
      showyear: false, // 年限的下拉
      showcom: false, // 贷款利率的下拉
      shape: 1, // 购房性质
      com_rate_percent: 5.9,
      fund_rate_percent: 3.5,
      model1: {
        com_amount: '',
        fund_amount: '',
        year: 6,
        rate: 1,
        pay_method: 'same_all'
      },
      // name:'1',color:'#ffaa7f',
      actionsyear: [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }, { name: '5', color: '#ff0000' }, { name: '6' }, { name: '7' }, { name: '8' }, { name: '9' }, { name: '10' }],
      range: [
        // { value: 0.8, text: '最新基础利率8折' },
        { value: 0.9, text: '最新基础利率9折' },
        { value: 1, text: '最新基础利率' },
        { value: 1.1, text: '最新基础利率1.1倍' }
        // { value: 1.2, text: '最新基础利率1.2倍' }
      ],
      rules: {}
    }
  }
}
</script>

<style lang="scss" >
::v-deep .uni-card {
  overflow: unset;
}
</style>
